<template>
  <div>
    <ECForm @register="registerForm">
      <template #testSlot>
        template中传入的插槽
      </template>

      <template #colSlot>
        --整个条目使用插槽--
      </template>

      <template #inputGroup="model">
        <ARow :gutter="8" style="{margin-bottom: 0 !important;}">
          <ACol :span="7">
            <AInput placeholder="请输入" v-model:value="model.inputDemo6" />
          </ACol>
          <ACol :span="17">
            <AInput placeholder="请输入" v-model:value="model.inputDemo7" />
          </ACol>
        </ARow>
      </template>
    </ECForm>
  </div>

</template>

<script lang="tsx" setup >
import { VNode } from 'vue'
import { useForm } from '@zm-pkg/ui'
import { Tooltip, Select, SelectOption } from 'ant-design-vue'
import { dict, DtEvent, Recordable, struc } from '@zm-pkg/core'

const loading = {
  searchRef: ref(false)
}
const createToolTip = (title: string, con: string | number | VNode) => {
  return h(Tooltip, {
    color: '#f50',
    title
  }, {
    default: () => con
  })
}

const [registerForm, { getFormValues }] = useForm({
  mode: null,
  labelWidth: 120,
  colProps: {
    span: 8
  },
  schemas: [
    {
      component: 'Divider',
      label: '公共属性'
    },
    {
      component: 'Input',
      name: 'commonDemo1',
      label: '主标题',
      subLabel: '副标题'
    },
    {
      component: 'Input',
      name: 'commonDemo2',
      label: '显示tooltip',
      toolTip: true,
      toolTipProps: {
        color: '#87d068'
      }
    },
    {
      component: 'Input',
      name: 'commonDemo3',
      label: '根据语言改变标签宽度',
      labelWidth: 140,
      enLabelWidth: 160
    },
    {
      component: 'Input',
      name: 'commonDemo4',
      label: '外面前后缀',
      prefix: '前缀',
      suffix: () => {
        let icon = h('i', {
          class: 'i mdi:chat-alert',
          style: {
            fontSize: '16px',
            color: 'rgba(0,0,0,0.6)',
            cursor: 'pointer'
          }
        })

        return createToolTip('我是提示内容', icon)
      }
    },
    {
      component: 'Input',
      name: 'commonDemo5',
      label: '默认值',
      defaultValue: '1'
    },
    {
      component: 'Input',
      name: 'commonDemo6',
      label: '改变列宽度',
      colProps: {
        span: 12
      }
    },
    {
      component: 'Input',
      name: 'commonDemo7',
      label: '动态设置显示隐藏',
      show: (model) => model.commonDemo5 === '1',
      props: {
        placeholder: '改变‘默认值’里的值试试'
      }
    },
    {
      component: 'Input',
      name: 'commonDemo8',
      label: '必填校验',
      required: true
    },
    {
      component: 'Input',
      name: 'commonDemo9',
      label: '禁用',
      disabled: true,
      props: {
        placeholder: '我被禁用了'
      }
    },
    {
      name: 'commonDemo10',
      label: '自定义内容',
      render(model) {
        return '我是自定义的内容'
      }
    },
    {
      component: 'Input',
      name: 'commonDemo11',
      label: 'ts传递插槽',
      renderComponent: (model) => {
        return {
          prefix: () => '￥'
        }
      }
    },
    {
      renderCol: (model) => '--ts中传入的插槽--'
    },
    {
      name: 'commonDemo12',
      label: 'template传递插槽',
      slot: 'testSlot'
    },
    {
      name: 'commonDemo13',
      colSlot: 'colSlot'
    },


    {
      component: 'Divider',
      label: '文本输入框'
    },

    {
      component: 'Input',
      name: 'inputDemo1',
      label: '普通输入框',
    },
    {
      component: 'Input',
      name: 'inputDemo2',
      label: '多条件校验',
      rules: [
        { message: '最小长度为10', min: 10 },
        { message: '最大长度为20', max: 20 },
        { message: '正则检验失败', pattern: /^[0-9]*$/ },
        { required: true },
      ],
    },
    {
      component: 'Input',
      name: 'inputDemo3',
      label: '监测数据变化',
      props: {
        onChange(e: DtEvent, model: Recordable) {
          console.log(e.target.value, `表单内容为: `, model )
        }
      }
    },
    {
      component: 'Input',
      name: 'inputAddon',
      label: '前后置',
      props: {
        addonBefore: 'Http://',
        addonAfter: '.com'
      }
    },
    {
      component: 'Input',
      name: 'inputDemo4',
      label: '内部前后缀',
      props: {
        prefix: '028-',
        suffix: createToolTip('我是内部前后缀内容', '测试'),
      }
    },
    {
      component: 'Input',
      name: 'inputDemo5',
      label: '带字数提示',
      props: {
        showCount: true,
        maxlength: 20
      }
    },
    {
      component: 'InputGroup',
      name: ['inputDemo6', 'inputDemo7'],
      label: '输入框组',
      slot: 'inputGroup',
      props: {
        defaultValue: ['0571', '26888888']
      }
    },
    {
      component: 'InputSearch',
      name: 'inputSearch',
      label: '查询输入框',
      props: {
        enterButton: true,
        loading: loading.searchRef,
        onSearch: (val: string) => {
          console.log(`查询输入框--您输入的值为:${ val }`)
          loading.searchRef.value = true
          setTimeout(() => {
            loading.searchRef.value = false
          }, 1000);
        }
      }
    },
    {
      component: 'InputPassword',
      name: 'InputPassword',
      label: '密码框',
      props: {
        visibilityToggle: true
      }
    },
    {
      component: 'InputTextArea',
      name: 'textarea1',
      label: '文本域',
      span: 16,
      required: true,
      props: {
        autoSize: { minRows: 3, maxRows: 5 },
        defaultValue: '我是基础文本域的默认值',
        disabled: false,
        allowClear: false,
        showCount: true,
        change: (e: DtEvent, formModel: Recordable) => {
          console.log("我要发生变化了", formModel)
          formModel.textarea1 = e.target.value
        }
      }
    },

    {
      component: 'Divider',
      label: '数字输入框'
    },
    {
      component: 'InputNumber',
      name: 'inputNumber1',
      label: '数字输入框',
      props: {
        min: 1,
        max: 100,
        step: 0.1
      }
    },
    {
      component: 'InputNumber',
      name: 'inputNumber2',
      label: '百分比转换',
      props: {
        max: 100,
        formatter: (val: string) => `${val}%`,
        parser: (val: string) => val.replace('%', ''),
      }
    },
    {
      component: 'InputNumber',
      name: 'inputNumber3',
      label: '千分位转换',
      props: {
        max: 999999999999,
        formatter: value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','),
        parser: value => value.replace(/\$\s?|(,*)/g, ''),
      }
    },
    {
      component: 'InputNumber',
      name: 'inputNumber4',
      label: '后后置标签',
      props: {
        addonAfter: h(Select, {
          defaultValue: 'USD',
          options: [
            { label: '$', value: 'USD' },
            { label: '€', value: 'EUR' },
            { label: '¥', value: 'CNY' }
          ]
        }),
        addonBefore: '¥'
      }
    },

    {
      component: 'Divider',
      label: '下拉框'
    },
    {
      component: 'Select',
      label: '基础使用',
      name: 'select1',
      props: {
        options: [
          { label: '目录', value: '0' },
          { label: '菜单', value: '1', disabled: true },
          { label: '按钮', value: '2' },
        ]
      }
    },
    {
      component: 'Select',
      label: '使用字典',
      name: 'select2',
      props: {
        options: dict('IS_ENABLE')
      }
    },
    {
      component: 'Select',
      label: '使用structure',
      name: 'select3',
      props: {
        options: struc('COUNTRY')
      }
    },
    {
      component: 'Select',
      label: 'structure带条件',
      name: 'select4',
      props: {
        options: struc('COUNTRY', {
          code: '123'
        })
      }
    },
    {
      component: 'Select',
      label: '多选+过滤',
      name: 'select5',
      props: {
        options: dict('IS_ENABLE'),
        mode: 'multiple'
      }
    },
    {
      component: 'Select',
      label: '自定义接口',
      name: 'defineDict',
      props: {
        options: dict({
          api: '/api-base/country/list',
          params: {
            id: '123456'
          },
          listName: ['data'],
          label: 'name',
          value: 'id',
          numberToString: true,
          setOptions(options) {
            options.push( {value: '4', label: '我是后来加上的数据'})

            return options
          }
        }),
      }
    },
    {
      component: 'TreeSelect',
      label: '树选择(树形)',
      name: 'treeSelect',
      props: {
        treeData: [
          {
            title: 'Node1',
            value: '0-0',
            key: '0-0',
            children: [
              {
                title: 'Child Node1',
                value: '0-0-0',
                key: '0-0-0',
              },
            ],
          },
          {
            title: 'Node2',
            value: '0-1',
            key: '0-1',
            children: [
              {
                title: 'Child Node3',
                value: '0-1-0',
                key: '0-1-0',
                disabled: true,
              },
              {
                title: 'Child Node4',
                value: '0-1-1',
                key: '0-1-1',
              },
              {
                title: 'Child Node5',
                value: '0-1-2',
                key: '0-1-2',
              },
            ],
          },
        ],
        treeCheckable: true,
        treeNodeFilterProp: 'title'
      }
    },
    {
      component: 'TreeSelect',
      label: '树选择(平铺)',
      name: 'treeSelect1',
      props: {
        treeData: [
          {
            title: 'Node1',
            value: '0-0',
            key: '0-0',
            id: 1,
            rootPid: null
          },
          {
            title: 'Node2',
            value: '0-1',
            key: '0-1',
            id: 2,
            pId: 1
          },
        ],
        treeCheckable: true,
        treeNodeFilterProp: 'title',
        treeDataSimpleMode: true
      }
    },
    {
      component: 'Divider',
      label: '日期控件'
    },
    {
      component: 'DatePicker',
      name: 'datePicker1',
      label: '年月日',
      props: {
        showTime: true,
        defaultValue: '2022-03-04 00:12:15',
        format: 'YYYY-MM-DD HH:mm:ss'
      }
    },
    {
      component: 'MonthPicker',
      name: 'monthPicker',
      label: '月份选择',
      props: {
        defaultValue: '2022-03-04'
      }
    },
    {
      component: 'DatePicker',
      name: 'yearPicker',
      label: '年选择',
      props: {
        defaultValue: '2022',
        format: 'YYYY',
        mode: 'year'
      }
    },
    {
      component: 'WeekPicker',
      name: 'weekPicker',
      label: '周选择'
    },
    {
      component: 'RangePicker',
      name: 'rangePicker',
      label: '范围选择',
      props: {
        defaultValue: ['2020-12-10', '2020-12-14']
      }
    },

    {
      component: 'Divider',
      label: '单选、复选框'
    },
    {
      component: 'RadioGroup',
      name: 'radioGroup',
      label: '单选',
      props: {
        options: dict('YES_NO'),
        defaultValue: 1
      }
    },
    {
      component: 'RadioButtonGroup',
      name: 'radioButton',
      label: '按钮单选',
      props: {
        options: dict('TEXT_ALIGN'),
        defaultValue: 2,
        buttonStyle: 'solid'
      }
    },
    {
      component: 'Checkbox',
      name: 'checkbox',
      label: '单个复选框',
      renderComponent: () => (<span class="text-12">是否同意</span>)
    },
    {
      component: 'CheckboxGroup',
      name: 'checkboxGroup',
      label: '复选框组',
      props: {
        options: dict('CLOUMN_TYPE'),
        defaultValue: [1, 2]
      }
    },
    {
      component: 'Divider',
      label: '开关按钮'
    },
    {
      component: 'Switch',
      name: 'switch',
      label: '开关按钮',
      props: {
        checkedValue: '2',
        unCheckedValue: '5',
        unCheckedChildren: '否',
        checkedChildren: '是',
        defaultValue: '2'
      }
    },
    {
      component: 'Divider',
      label: '级联选择'
    },
    {
      component: 'Cascader',
      name: 'cascader',
      label: '级联选择',
      props: {
        dropdownMatchSelectWidth: false,
        options: [
          {
            value: 'zhejiang',
            label: 'Zhejiang',
            children: [
              {
                value: 'hangzhou',
                label: 'Hangzhou',
                children: [
                  {
                    value: 'xihu',
                    label: 'West Lake',
                  },
                ],
              },
            ],
          },
          {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
              {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                  {
                    value: 'zhonghuamen',
                    label: 'Zhong Hua Men',
                  },
                ],
              },
            ],
          },
        ],
        defaultValue: ['zhejiang', 'hangzhou', 'xihu'],
        onChange(e) {
          console.log(e)
        }
      }
    },
    {
      component: 'Divider',
      label: '文件上传'
    },
    {
      component: 'Upload',
      name: 'upload',
      label: '文件上传',
      props: {
        defaultFiles: [
          { fileName: '测试pdf.pdf', fileId: '滴滴电子发票.pdf' }
        ]
      }
    },
    {
      component: 'Upload',
      name: 'uploadImg',
      label: '上传图片',
      props: {
        listType: 'picture-card',
        multiple: true
      }
    },
    {
      component: 'Divider',
      label: '其它'
    },
    {
      component: 'Rate',
      name: 'rate',
      label: '评分',
      props: {
        defaultValue: 2.5,
        allowHalf: true
      }
    },
    {
      component: 'Slider',
      name: 'slider',
      label: '滑动输入条'
    },

  ]
})
</script>
